<template>
  <div>
    <!-- 用户信息 -->
    <div class="new-user-info mb-lg rel">
      <img class="abs bg-img" :src="o.data.bgImage[0].url" mode="aspectFill" />
      <div v-if="isMemberAuth === true">
        <img
          class="abs vip-bg-img"
          src="https://lbqny.migugu.com/admin/member/vip_bottom.png"
          mode="aspectFill"
        />
        <div
          class="abs vip-bg-img flex-between pl-lg pr-lg f-paragraph"
          :style="{ height: '33px', color: '#F9DEAF' }"
        >
          <div>铂金会员</div>
          <div class="flex-y-center">
            查看详情
            <div
              class="vip-icon flex-center ml-sm"
              :style="{ backgroundColor: '#F9DEAF' }"
            >
              <i
                class="iconfont iconjiantou"
                style="font-size: 9px; color: #000000; transform: scale(0.8)"
              ></i>
            </div>
          </div>
        </div>
      </div>
      <div
        class="flex-center c-base pl-lg pr-lg abs"
        style="top: 85px; width: 100%"
      >
        <div
          class="rel avatar-bg circle"
          :style="{ backgroundColor: isMemberAuth === true ? '#F9DEAF' : '' }"
        >
          <img class="avatar abs circle" :src="o.data.avatarUrl" />
          <div class="vip-text abs" v-if="isMemberAuth === true">
            <div class="text c-title" :style="{ backgroundColor: '#F9DEAF' }">
              VIP
            </div>
          </div>
        </div>
        <div class="flex-1 flex-between ml-md">
          <div>
            <div class="mr-md f-title" :style="{ color: o.data.fontColor }">
              {{ o.data.nickName }}
            </div>
            <div class="f-caption" :style="{ color: o.data.fontColor }">
              {{ o.data.nickText }}
              <i
                class="iconfont ml-sm iconshuaxin"
                :style="{ color: o.data.fontColor }"
              ></i>
            </div>
          </div>
          <div class="flex-y-baseline f-caption">
            编辑资料<i
              class="iconfont iconbianji1 ml-sm"
              style="font-size: 12px"
            ></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'userInfo',
  props: {
    o: Object,
    primaryColor: '#19c865'
  },
  data () {
    return {
      isMemberAuth: false
    }
  },
  async created () {
    await this.getMemberAuth()
  },
  methods: {
    async getMemberAuth () {
      let { code, data } = await this.$api.getBaseMemberAuth()
      if (code !== 200) return
      this.isMemberAuth = data
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 用户信息 */
.new-user-info,
.new-user-info .bg-img {
  width: 375px;
  height: 220px;
  overflow: hidden;
}
.new-user-info .avatar-bg {
  width: 70px;
  height: 70px;
  overflow: hidden;
}
.new-user-info .avatar {
  width: 60px;
  height: 60px;
  top: 5px;
  left: 5px;
}
/* vip设置 */
.vip-bg-img {
  width: 345px;
  height: 40px;
  left: 15px;
  bottom: 0;
}
.vip-icon {
  width: 15px;
  height: 15px;
  /* display: inline-block; */
  border-radius: 30px;
  margin-left: 5px;
}
.vip-text {
  bottom: 0px;
  width: 100%;
  text-align: center;
}
.vip-text .text {
  color: white;
  margin: 0 auto;
  display: inline-block;
  padding: 3px 5px 3px 5px;
  border-radius: 3px;
  font-size: 9px;
  line-height: 1;
}
</style>
